<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>完善会员资料</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/City.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css?v=1" />
</head>               
<body>
	<div class="page-group ms-controller" :controller="memberPerfect">
        <div class="page page-current" style="background: #efeff4">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">完善会员资料</h1>
            </header>
            <div class="content visibility">
            	<div class="content-block-title title01">温馨提示：带 * 号内容一经填写不可更改！</div>
            	  	<div class="list-block" style="margin:0">
	            	    <ul class="block-ul">
	            	      	<li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">会员昵称</div>
	            	            		<div class="item-input">
	            	              			<input type="text" :duplex="nickName" placeholder="请填写会员昵称">
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
	            	      	<li>
	            	        	<div class="item-content">
	            	          		<div class="item-inner">
	            	            		<div class="item-title label">会员性别</div>
	            	            		<div class="item-input">
	            	                		<input type="text" id="sex" readonly placeholder="请选择会员性别">
	            	                		<input type="hidden" :duplex="sex" id="sexValue" readonly>
	            	            		</div>
	            	          		</div>
	            	        	</div>
	            	      	</li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label">出生日期</div>
			            	            <div class="item-input">
			            	            	<input type="text" id="datetime" :duplex="dateTime" readonly placeholder="请选择出生日期">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label">会员头像</div>
			            	            <div class="item-input">
			            	                <input type="file" :on-change="@upload" id="file" name="kcs_uploader_file" accept="image/*"/>
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>真实姓名</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @readonly?true:false}" :duplex="realName" placeholder="请填写真实姓名">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>身份证号</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @readonly?true:false}" :duplex="idNo" placeholder="请填写身份证号">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>手机号码</div>
			            	            <div class="item-input">
			            	                {{@info.mobile}}
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>所在地区</div>
			            	            <div class="item-input">
			            	            	<input type="text" id="picker" readonly placeholder="请选择地区">
			            	            	<input type="hidden" :duplex="area" id="value">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>详细地址</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @readonly?true:false}" :duplex="address" placeholder="请填写详细地址">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>电子邮箱</div>
			            	            <div class="item-input">
			            	              <input type="text" :attr="{'readonly': @readonly?true:false}" :duplex="email" placeholder="请填写电子邮箱账号">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>开户银行</div>
			            	            <div class="item-input">
			            	                <input type="text" id="bank" readonly placeholder="请选择开户银行">
			            	                <input type="hidden" :duplex="bank" id="bankValue" readonly>
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content">
			            	        <div class="item-inner">
			            	            <div class="item-title label"><span style="color:red; margin-right:2%;">* </span>银行账号</div>
			            	            <div class="item-input">
			            	              <input type="number" :attr="{'readonly': @readonly?true:false}" :duplex="bankNo" placeholder="请填写银行账号">
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content" style="background-color:#fcfcfc;">
			            	        <div class="item-inner">
			            	            <span style="color:red; margin:0 5% 0 12%;"><input type="checkbox" checked name="yb" /></span>
			            	            <div class="item-input" style="font-size:16px; color:#666;">
			            	                同步提交至艺宝在线直接开户
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
		            	    <li>
		            	        <div class="item-content" style="background-color:#fcfcfc;">
			            	        <div class="item-inner">
			            	            <span style="color:red; margin:0 5% 0 12%;"><input type="checkbox" checked name="one" /></span>
			            	            <div class="item-input" style="font-size:16px; color:#666;">
			            	                同意<a href="javascript:;">《会员信息隐私声明》</a>
			            	            </div>
			            	        </div>
		            	        </div>
		            	    </li>
	            	  	</ul>    
		            	<div class="content-block">
			            	<div class="row">
			            	      	<div class="col-50" style="width:95%;"><a href="javascript:;" :on-click="@submit" class="button button-big button-fill button-danger">确认并提交</a></div>
			            	</div>
		            	</div>
	            	</div>
            	</div>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/City.js' charset='utf-8'></script>
<script>
	var memberPerfect = avalon.define({
		$id: "memberPerfect",
		nickName: "",
		sex: "1",
		dateTime: "",
		avatarUrl: "",
		realName: "",
		idNo: "",
		area: "",
		address: "",
		email: "",
		bank: "",
		bankNo: "",
		readonly: false,
		info: {},
		getInfo: function(){
			Mall.request( "/api/UserInfo" )
				.always( function( data ){
					if( data.error_code == 0 ){
					    memberPerfect.info = data.data;
					    if( data.data.real_name ){
					    	memberPerfect.realName = data.data.real_name;
					    	memberPerfect.idNo = data.data.id_no;
					    	memberPerfect.area = data.data.area;
					    	$( "#picker" ).val( data.data.area_label );
					    	memberPerfect.address = data.data.address;
					    	memberPerfect.email = data.data.email;
					    	memberPerfect.bank = data.data.bank_type;
					    	$( "#bank" ).val( data.data.bank_type_label );
					    	memberPerfect.bankNo = data.data.bank_no;
					    	memberPerfect.readonly = true;
					    }
					    else{
					    	memberPerfect.getBank();
					    	memberPerfect.getCity();
					    }
					    $("#datetime").calendar();
					    data.data.nickname && ( memberPerfect.nickName = data.data.nickname );
					    data.data.sex && ( memberPerfect.sex = data.data.sex );
					    data.data.sex_label && $( "#sex" ).val( data.data.sex_label );
					    data.data.born && $( "#datetime" ).val( data.data.born );
					    $("#sex").picker({
					      	toolbarTemplate: '<header class="bar bar-nav">\
					      		<button class="button button-link pull-right close-picker">确定</button>\
					      		<h1 class="title">请选择性别</h1>\
					      		</header>',
					      	cols: [{textAlign: 'center',values: ['0', '1'],displayValues: ["男","女"]}],
					      	formatValue: function( e, v ,dv ){
					      		$( "#sexValue" ).val( v )
					      		return dv
					      	}
					    });
                        $( ".content" ).removeClass( "visibility" );
					}
					else{
					    $.alert(data.error_msg);
					}
				} )
		},
		getCity: function(){
		    Mall.request("/api/AreaDict")
		        .always( function( data ){
		            if( data.error_code == 0 ){
		                var area = new LArea();
		                area.init({
		                    'trigger': '#picker', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
		                    'valueTo': '#value', //选择完毕后id属性输出到该位置
		                    'keys': {
		                        id: 'id',
		                        name: 'name'
		                    }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
		                    'type': 1, //数据源类型
		                    'data': data.data //数据源
		                });
		            }
		            else{
		                $.alert(data.error_msg)
		            }
		        } )
		},
		getBank: function(){
			Mall.request("/api/BankList")
				.always( function( data ){
					if( data.error_code == 0 ){
						var v = [],
							vs = [];
						for( var k in data.data ){
							v.push( k );
							vs.push( data.data[k] )
						}
					    $("#bank").picker({
					      	toolbarTemplate: '<header class="bar bar-nav">\
					      		<button class="button button-link pull-right close-picker">确定</button>\
					      		<h1 class="title">请选开户银行</h1>\
					      		</header>',
					      	cols: [{textAlign: 'center',values: v,displayValues: vs}],
					      	formatValue: function( e, v ,dv ){
					      		$( "#bankValue" ).val( v )
					      		return dv
					      	}
					    });
					}
					else{
					    $.alert(data.error_msg)
					}
				} )
		},
		submit: function(){
			if( Mall.LOCK ){
				return
			}
			if( !memberPerfect.realName ){
				$.toast( "请填写真实姓名", 2000, "warning" )
				return
			}
			if( !Mall.idCard(memberPerfect.idNo) ){
				$.toast( "请填写正确身份证号", 2000, "warning" )
				return
			}
			if( !memberPerfect.area ){
				$.toast( "请选择所在地区", 2000, "warning" )
				return
			}
			if( !memberPerfect.address ){
				$.toast( "请填写详细地址", 2000, "warning" )
				return
			}
			if( !Mall.email(memberPerfect.email) ){
				$.toast( "请填写正确邮箱", 2000, "warning" )
				return
			}
			if( !memberPerfect.bank ){
				$.toast( "请选择开户行", 2000, "warning" )
				return
			}
			if( !memberPerfect.bankNo ){
				$.toast( "请填写银行账号", 2000, "warning" )
				return
			}
			if(!$("input[name=yb]").is(':checked')){
				$.toast( "请同意同步至艺宝在线", 2000, "warning" )
				return
			}
			if(!$("input[name=one]").is(':checked')){
				$.toast( "请同意声明", 2000, "warning" )
				return
			}
			Mall.LOCK = true;
			var postData = {
				real_name: memberPerfect.realName,
				id_no: memberPerfect.idNo,
				area: memberPerfect.area,
				address: memberPerfect.address,
				mobile: memberPerfect.info.mobile,
				email: memberPerfect.email,
				bank_type: memberPerfect.bank,
				bank_no: memberPerfect.bankNo,
			}
			memberPerfect.nickName && ( postData.nickname = memberPerfect.nickName );
			memberPerfect.sex && ( postData.sex = memberPerfect.sex );
			memberPerfect.dateTime && ( postData.born = memberPerfect.dateTime );
			memberPerfect.avatarUrl && ( postData.avatar_url = memberPerfect.avatarUrl );
			Mall.request( "/api/FillUserInfo", postData )
				.always( function( data ){
					if( data.error_code == 0 ){
					    $.toast( "完善会员资料成功", 1000, "success", function(){
					        window.location.href="/H5/member";
					    } )
					}
					else{
					    $.alert(data.error_msg);
					    Mall.LOCK = false;
					}
				} )
		},
		upload: function(){
		    var formData = new FormData();
		    formData.append('kcs_uploader_file', $('#file')[0].files[0]);
		    formData.append('api_token', simpleStorage.get( "token" ));
		    $.ajax({
                url : ( simpleStorage.get( "host" ) || "http://"+location.hostname ) + '/api/Upload',//这里写你的url
                type : 'POST',
                data : formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                dataType: 'json',//这里是返回类型，一般是json,text等
                clearForm: true,//提交后是否清空表单数据
                success: function(data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    memberPerfect.avatarUrl = data.data.avatar_url;
                },
                error: function(data, status, e) {  //提交失败自动执行的处理函数。
                    $.alert(e);
                }
            });
		},
	})
	memberPerfect.getInfo();
	avalon.scan( document.body )
</script>
</body>
</html>
